<template>
	<view>
		<view class="searchBg">
			<view class="search">
				<u-search 
				placeholder="请输入学习测验试题名称" 
				v-model="keyword" 
				bgColor="#fff"
				:clearabled="false" 
				:showAction="false"
				@change="search"
				></u-search>
			</view>
		</view>
		
		<view class="list" v-if="courseBrowseList.length > 0">
		 	 <view class="list_item" v-for="(item, index) in courseBrowseList" :key="item.id" @click="clickCourse(item)">
						 <view class="list_item_image"><image class="list_item_image" :src="imgUrl+item.coverUrl" mode="scaleToFill"></image></view>
						 <view class="list_item_courseInfo">
						 	 <text class="courseName">{{item.courseName}}</text>
							 <view class="courseDec">{{item.courseRemark}}</view>
						 </view>
		 	 </view>
			 <u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
		 </view>
		 <u-empty v-if="courseBrowseList.length == 0" mode="list" marginTop="40upx"></u-empty>
		
	</view>
</template>

<script>
	
	import * as mineApi from '@/common/apis/mine-api.js';
	export default {
		data() {
			return {
				pageNum : 1,
				loadingStatus: 'loading',
				keyword : '',
				courseBrowseList : [],
				imgUrl: this.examBaseImageUrl
			}
		},
		onPullDownRefresh() {
			this.pageNum = 1;
			this.getCourseBrowseList();
		},
		
		onReachBottom() {
			console.log('到底了');
			this.getCourseBrowseList();
			this.loadingStatus = 'loading';
		},
		async onLoad() {
		  await this.getCourseBrowseList();
		},
		
		methods: {
			getCourseBrowseList() {
				mineApi.courseBrowseList({
					courseName : this.keyword,
					pageNum : this.pageNum,
					pageSize : 10
				}).then(res => {
					
					if(this.pageNum == 1) {
						this.courseBrowseList = [];
						this.pageNum++;
						// this.loadingStatus = 'loadmore';
						this.loadingStatus = 'nomore';
					}else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNum++;
							this.loadingStatus = 'loadmore';
						} else {
							this.loadingStatus = 'nomore';
						}
					}
					
					if (!uni.$u.test.isEmpty(res)) {
						this.courseBrowseList = res;
						// this.courseBrowseList = this.courseBrowseList.concat(res);
					}
				})
			},
			
			clickloadmore() {
				this.getCourseBrowseList();
				this.loadingStatus = 'loading';
			},
			//搜索
			search() {
				this.pageNum = 1;
				this.getCourseBrowseList();
			},
			clickCourse(item) {
				getApp().globalData.courseInfo = item;
				uni.navigateTo({
					url: '../course/chapter-list?courseId=' + item.courseId
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.searchBg {
	  background-color: #12B9A3;
		width: 100%;
		height: 140upx;
		display: flex;
		justify-content: center;
		align-items: center;
	
	}
	
	.search {
		margin-left: 25upx;
		margin-right: 25upx;
		width: 85%;
	}
	
	.list {
		margin-top: 10upx;
		padding: 10upx 35upx;
		&_item {
			padding: 10upx;
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-bottom: 20upx;
			border-radius: 16upx;
			&_image {
				display: inline-block;
				width: 320upx;
				height: 180upx;
			}
			&_courseInfo {
				display: flex;
				flex-direction: column;
				margin-left: 26upx;
				// position: relative;
				width: 100%;
				.courseName {
					margin-top: 30upx;
					font-size: 30upx;
					font-family: Source Han Sans CN, Source Han Sans CN-Bold;
					font-weight: bold;
					text-align: left;
					color: #333333;
				}
				.courseDec {
					margin-top: 15upx;
					font-size: 20upx;
					font-family: Source Han Sans CN, Source Han Sans CN-Bold;
					font-weight: bold;
					text-align: left;
					color: #999999;
				}
				
				.study {
					display: inline-block;
					text-align: center;
					width: 130upx;
					align-self: flex-end;
					line-height: 54upx;
					font-size: 20upx;
					color: #fff;
					background-color: $green12;
					margin-top: 20upx;
					border-radius: 90upx;
				}
				
			}
		}
	}
		
	
</style>
